<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>人员管理</title>
    <link rel="stylesheet" href="../../component/pear/css/pear.css"/>
</head>
<body class="pear-container">
<style>
    .edit-btn {
        border: 0;
        background: 0;
        color: #0000FF;
        font-size: 14px;
    }

    .edit-btn:hover {
        border: 0;
        background: 0;
        font-size: 14px;
    }

    .addperson {
        background-color: #2D8CF0 !important;
        color: white;
        border: 0;
        height: 34px;
        line-height: 34px;
        padding: 0 10px;
        font-size: 12.5px;
        cursor: pointer;
    }
</style>


<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="s.pname\@like" class="layui-input">
                    </div>
                    <!--<label class="layui-form-label">专业类别</label>
                    <div class="layui-input-inline">
                        <select name="s.major_type\@like" lay-search="">
                            <option value="" selected>请选择</option>
                            @for(item in zylbList!){
                            <option value="${item.id}">${item.name!}</option>
                            @}
                        </select>
                    </div>-->
                    <label class="layui-form-label">单位</label>
                    <div class="layui-input-inline" style="width: 250px">
                        <select name="s.unit\@like" lay-search="">
                            <option value="" selected>请选择</option>
                            @for(item in dwList!){
                            <option value="${item.id}">${item.name!}</option>
                            @}
                        </select>
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="busPerson-query">
                        <i class="layui-icon layui-icon-search"></i>
                        查询
                    </button>
                    <button type="reset" class="pear-btn pear-btn-md">
                        <i class="layui-icon layui-icon-refresh"></i>
                        重置
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="layui-card">
    <div class="layui-card-body">
        <table id="busPerson-table" lay-filter="busPerson-table"></table>
    </div>
</div>

<script type="text/html" id="busPerson-toolbar">
    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="addperson">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>
    <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
        <i class="layui-icon layui-icon-delete"></i>
        删除
    </button>
</script>


<script type="text/html" id="busPerson-bar">
    <button class="pear-btn pear-btn-warming pear-btn-sm" lay-event="pic" title="照片"><i class="layui-icon layui-icon-picture"></i></button>
    <button class="pear-btn pear-btn-warming pear-btn-sm" lay-event="koufen" title="扣分"><i class="layui-icon layui-icon-auz"></i></button>
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit" title="编辑"><i class="layui-icon layui-icon-edit"></i></button>
    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove" title="删除"><i class="layui-icon layui-icon-delete"></i></button>
</script>

<script type="text/html" id="driver_license-bar">
    <button class="pear-btn pear-btn-info pear-btn-sm" lay-event="lookup" title="查看驾照"><i
            class="layui-icon layui-icon-about"></i></button>
</script>
<script type="text/html" id="black-enable">
    <input type="checkbox" name="black_flag" value="{{d.id}}" lay-skin="switch" lay-text="是|否"
           lay-filter="black-enable" {{d.black_flag==0?'checked':''}}>
</script>
<script type="text/html" id="nelist-enable">
    <input type="checkbox" name="nelist_flag" value="{{d.id}}" lay-skin="switch" lay-text="是|否"
           lay-filter="nelist-enable" {{d.nelist_flag==0?'checked':''}}>
</script>
<script type="text/html" id="busPerson-sex">
    {{#if (d.sex == 0) { }}
    <span>男</span>
    {{# }else if(d.sex == 1){ }}
    <span>女</span>
    {{# } }}
</script>
<script type="text/html" id="access-status">
    {{#if (d.accessStatus == 0) { }}
    <span>有效</span>
    {{# }else if(d.accessStatus == 1){ }}
    <span>无效</span>
    {{# } }}
</script>

<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
    layui.use(['table', 'form', 'jquery', 'common'], function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let common = layui.common;

        let VIEW_PATH = "${ctxPath}/busPerson/view/";
        let DATA_PATH = "${ctxPath}/busPerson/data/";
        let FACE_PATH = "${ctxPath}/face/";

        let cols = [[
            {type: 'checkbox'},
            {title: '姓名', field: 'pname', align: 'center'},
            {title: '性别', field: 'sex', align: 'center', templet: '#busPerson-sex'},
            {title: '手机号', field: 'phone', align: 'center'},
            {title: '单位', field: 'unit', align: 'center', width: 240},
            {title: '专业类别', field: 'majorType', align: 'center',width: 180,},
            {title: '驾照类别', field: 'driverType', align: 'center'},
            {
                title: '签发日期', field: 'issueDate', align: 'center',
                templet: function (d) {
                    return layui.util.toDateString(d.issueDate, 'yyyy-MM-dd')
                }
            },
            {title: '驾照编号', field: 'driverNumber', align: 'center'},
            {title: '驾照分', field: 'driverPoint', align: 'center',templet: function (d){
                    return '<a href="javascript:;" onclick="showWzInfo(\''+d.id+'\',\''+d.pname+'\')">'+d.driverPoint+'</a>';
                }},
            {title: '黑名单', field: 'black_flag', align: 'center', templet: '#black-enable'},
            /*{title: '负面清单', field: 'nelist_flag', align: 'center', templet: '#nelist-enable'},*/
            {title: '准入状态', field: 'accessStatus', align: 'center', templet: '#access-status'},
            /*{title: '驾照', field: 'driverPath', align: 'center', toolbar: '#driver_license-bar', width: 80},*/
            {title: '操作', toolbar: '#busPerson-bar', align: 'center', width: 190}
        ]];

        table.render({
            elem: '#busPerson-table',
            url: DATA_PATH + 'list',
            page: true,
            cols: cols,
            skin: 'line',
            toolbar: '#busPerson-toolbar',
            defaultToolbar: "",
            height: 'full-180'
        });

        table.on('tool(busPerson-table)', function (obj) {
            if (obj.event === 'remove') {
                window.remove(obj);
            } else if (obj.event === 'edit') {
                window.saveOrUpdate(obj);
            } else if (obj.event === 'koufen') {
                layer.open({
                    type: 2,
                    title: '人员违章扣分',
                    shade: 0.1,
                    area: [common.isModile() ? '100%' : '700px', common.isModile() ? '100%' : '450px'],
                    content: VIEW_PATH + 'wzPoint' + (obj ? "?id=" + obj.data.id : "")
                });
            } else if(obj.event === 'pic') {
                console.log(FACE_PATH+obj.data.facePath);
                let imgHtml = "<img src='"+FACE_PATH+obj.data.facePath+"' onerror=\"javascript:this.src='${ctxPath}/static/resource/images/pic404.png'\" width='400px' height='500px' style='object-fit:contain;'/>";
                layer.open({
                    type: 1,
                    shadeClose: true,
                    scrollbar: false,
                    maxmin: true,
                    shade: 0.1,
                    title: "人员照片预览 - "+obj.data.pname,
                    content: imgHtml,
                    cancel: function () {

                    }
                })
            }
        });

        table.on('toolbar(busPerson-table)', function (obj) {
            if (obj.event === 'addperson') {
                window.saveOrUpdate();
            } else if (obj.event === 'refresh') {
                window.refresh();
            } else if (obj.event === 'batchRemove') {
                window.batchRemove(obj);
            }
        });

        form.on('switch(black-enable)', function (obj) {
            var flag = obj.elem.checked;
            var text = "确定要拉入黑名单吗？";
            if (!flag) {
                text = "确定要拉出黑名单吗？";
            }
            layer.confirm(text, {
                icon: 3,
                title: '提示'
            }, function (index) {
                layer.close(index);
                let loading = layer.load();
                $.post(DATA_PATH + "control", {
                    userid: obj.value,
                    control_type: 0,
                    control_value: flag ? "0" : "1"
                }, function (rs) {
                    layer.close(loading);
                    // console.log(rs);
                })
            }, function (idx) {
                layer.close(idx);
                var em = $(obj.othis[0]);
                if (!flag) {
                    obj.othis[0].classList.add('layui-form-onswitch');
                    em.children('em').text('是');
                    obj.elem.checked = true;
                } else {
                    obj.othis[0].classList.remove('layui-form-onswitch');
                    em.children('em').text('否');
                    obj.elem.checked = false;
                }
            });

        });

        form.on('switch(nelist-enable)', function (obj) {
            var flag = obj.elem.checked;
            var text = "确定要列入负面清单吗？";
            if (!flag) {
                text = "确定要拉出负面清单吗？";
            }
            layer.confirm(text, {
                icon: 3,
                title: '提示'
            }, function (index) {
                layer.close(index);
                let loading = layer.load();
                $.post(DATA_PATH + "control", {
                    userid: obj.value,
                    control_type: 1,
                    control_value: flag ? "0" : "1"
                }, function (rs) {
                    layer.close(loading);
                    // console.log(rs);
                })
            }, function (idx) {
                layer.close(idx);
                var em = $(obj.othis[0]);
                if (!flag) {
                    obj.othis[0].classList.add('layui-form-onswitch');
                    em.children('em').text('是');
                    obj.elem.checked = true;
                } else {
                    obj.othis[0].classList.remove('layui-form-onswitch');
                    em.children('em').text('否');
                    obj.elem.checked = false;
                }
            });
        });
        form.on('submit(busPerson-query)', function (data) {
            table.reload('busPerson-table', {
                where: data.field,page: {curr: 1}
            })
            return false;
        });


        window.saveOrUpdate = function (obj) {
            layer.open({
                type: 2,
                title: obj ? '修改作业人员' : '新增作业人员',
                shade: 0.1,
                area: [common.isModile() ? '100%' : '500px', common.isModile() ? '100%' : '600px'],
                content: VIEW_PATH + 'saveOrUpdate' + (obj ? "?id=" + obj.data.id : "")
            });
        }

        window.remove = function (obj) {
            layer.confirm('确定要删除该条记录', {
                icon: 3,
                title: '提示'
            }, function (index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: DATA_PATH + "remove?ids=" + obj.data['id'],
                    dataType: 'json',
                    type: 'post',
                    success: function (result) {
                        layer.close(loading);
                        if (result.code == 0) {
                            layer.msg("操作成功", {
                                icon: 1,
                                time: 1000
                            }, function () {
                                obj.del();
                                window.refresh();
                            });
                        } else {
                            layer.msg("操作失败", {
                                icon: 2,
                                time: 1000
                            });
                        }
                    }
                })
            });
        }

        window.batchRemove = function (obj) {
            var checkIds = common.checkField(obj, 'id');
            if (checkIds === "") {
                layer.msg("未选中数据", {
                    icon: 0,
                    time: 1000
                });
                return false;
            }
            layer.confirm('确定要删除这些用户', {
                icon: 3,
                title: '提示'
            }, function (index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: DATA_PATH + "remove?ids=" + checkIds,
                    dataType: 'json',
                    type: 'post',
                    success: function (result) {
                        layer.close(loading);
                        if (result.code == 0) {
                            layer.msg("操作成功", {
                                icon: 1,
                                time: 1000
                            }, function () {
                                table.reload('busPerson-table');
                            });
                        } else {
                            layer.msg("操作失败", {
                                icon: 2,
                                time: 1000
                            });
                        }
                    }
                })
            });
        }

        window.refresh = function (param) {
            table.reload('busPerson-table');
        }

        window.showWzInfo=function (id,pname){
            layer.open({
                type: 2,
                title: '人员扣分记录 - '+pname,
                shade: 0.1,
                area: [common.isModile() ? '100%' : '1000px', common.isModile() ? '100%' : '700px'],
                content: VIEW_PATH + 'showkf?personId='+id
            });
        }
    })
</script>
</body>
</html>
